<template>
  <div>
    <v-container class="pa-0">
    <v-row
      v-for="(personage, i) in personages"
      :key="i"
      align="center"
      class="mb-2"
    >
      <v-col
        class="d-flex"
        cols="12"
      >
        <v-img
          :src="personage.cover?personage.cover:personage.portrait"
          class="mr-3"
          height="116"
          max-width="116"
        />

        <div>
          <div class="subheading">
            {{personage.name}}
          </div>

          <div class="caption my-2">
            {{personage.introduce}}
          </div>

          <v-chip
            class="caption mt-2 mr-1"
            x-small
            outlined
            color="success"
            v-for="(work, i) in personage.works"
            :key="i"
            :href="'personage/' + work._id"
          >
            {{ work.title }}
          </v-chip>
        </div>
      </v-col>
    </v-row>
  </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      personages:[]
    }
  },
  async asyncData({ $axios }) {
    const personages = await $axios.$get('personages/works')
    return {
      personages
    }
  }
}
</script>

<style></style>
